<template>
  <div class="permission">
    <el-dialog
      title="权限分配"
      :visible.sync="dialogPermissionVisible"
      @close="close"
      custom-class="custom-dialog-header"
      width="40%"
    >  
    
      <div class="dialog-content" style="display:flex;justify-content:space-between;">
        <el-tree
          :data="data4"
          :props="defaultProps"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          class="custom-tree"
        >
       
       
        </el-tree>
         <p>选择上一级权限，所包含的下一级权限默认全部选中</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let id = 1000;
export default {
  data() {
    return {
      dialogPermissionVisible: false,
      checked: false,
      data4: [
        // 你的数据在这里
        {
          id: 30,
          label: "联动数字化平台",
          children: [
            {
              id: 1,
              label: "统计",
            },
            {
              id: 2,
              label: "技术运营联动",
              children: [
                {
                  id: 4,
                  label: "停机维护",
                  children: [
                    {
                      id: 5,
                      label: "停机维护信息同步",
                    },
                    {
                      id: 6,
                      label: "停机维护信息查询",
                    },
                  ],
                },
                {
                  id: 7,
                  label: "事件处置",
                  children: [
                    {
                      id: 8,
                      label: "事件处置",
                    },
                    {
                      id: 9,
                      label: "事件辅助通知",
                    },
                  ],
                },
                {
                  id: 10,
                  label: "生产压测",
                },
                {
                  id: 11,
                  label: "风险排查",
                },
                {
                  id: 12,
                  label: "互联互通",
                },
              ],
            },
            {
              id: 3,
              label: "运营服务联动",
              children: [
                {
                  id: 13,
                  label: "交易协查",
                },
                {
                  id: 14,
                  label: "通讯录维护",
                },
              ],
            },
            {
              id: 4,
              label: "运营联动交流",
              children: [
                {
                  id: 15,
                  label: "信息共享与联动交流",
                },
              ],
            },
            {
              id: 5,
              label: "其他",
              children: [
                {
                  id: 16,
                  label: "工作催办",
                },
                {
                  id: 17,
                  label: "监控传输",
                },
              ],
            },
            {
              id: 6,
              label: "系统管理",
              children: [
                {
                  id: 18,
                  label: "菜单管理",
                },
                {
                  id: 19,
                  label: "角色管理",
                },
                {
                  id: 20,
                  label: "用户管理",
                },
                {
                  id: 21,
                  label: "权限管理",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    close() {
      this.dialogPermissionVisible = false;
    },
  },
};
</script>

<style lang='scss' >
.permission {
  .custom-dialog-header .el-dialog__header {
    background-color: #5084fb; /* 自定义背景色 */
    /* 其他样式属性 */
    color: #ffffff;
  }
  .el-dialog__title,
  .el-dialog__headerbtn i {
    color: white;
  }
  .el-dialog__footer {
    text-align: center;
  }

  .custom-tree{
    width: 300px;
  }
}
</style>